import React, { CSSProperties } from 'react';
import { IProps } from 'src/pages/AnalyseManage/EditReport/components/ChartsType/components/ChartService';
import styles from 'src/pages/AnalyseManage/EditReport/index.module.scss';
import { Modal } from 'antd';

export default class ImageChart extends React.PureComponent<IProps> {

	state = {
		modalVisiable: false
	};

	showPage = () => {
		if ( !this.props.config.mutual.linkHref ) return;
		if ( this.props.config.mutual.openingMode === 'modal' ) {
			this.setModalVisiable( true );
		} else {
			window.open( `https://${ this.props.config.mutual.linkHref }`, this.props.config.mutual.openingMode );
		}

	};

	setModalVisiable = ( visible ) => {
		this.setState( {
			modalVisiable: visible
		} );
	};

	render() {
		const { mutual } = this.props.config;
		const imgStyle = {
			transform: `rotate(${ mutual.imageRotate || 0 }deg)`,
			objectFit: mutual.isKeepRatio ? 'contain' : 'fill',
			cursor: this.props.config.mutual.linkHref ? 'pointer' : 'auto',
			pointerEvents: 'auto'
		} as CSSProperties;

		return (
			<div className={ styles.image_chart }
					 style={ { height: this.props.config.style.titleShow === false ? '100%' : '100%' } }>
				{
					mutual.imageList && mutual.imageList.length > 0 ? (
						<img onClick={ () => this.showPage() } src={ mutual.imageList[ 0 ].url } alt=""
								 style={ imgStyle }/>
					) : <span>请上传图片</span>
				}

				<Modal
					width="80%"
					visible={ this.state.modalVisiable }
					title={ this.props.config.style.titleValue }
					onOk={ () => this.setModalVisiable( false ) }
					onCancel={ () => this.setModalVisiable( false ) }
				>
					<div>
						<iframe
							style={ { width: '100%', height: '62vh' } } frameBorder="0" title="test"
							src={ `https://${ mutual.linkHref }` }></iframe>
					</div>
				</Modal>
			</div>
		);
	}
}
